<template>
	<div class="User_top">
		<div class="yellow">
			<p>
				<img src="../../../../public/grimg/gray.png" />
			<router-link to="/order" v-if="xixi==undefined">
				<button v-if="xixi==undefined">去登录/注册</button>
				
			</router-link>	
				<button v-if="xixi==0">{{valu}}</button>
			</p>
			
			<p>
				<span v-if="xixi==undefined">新用户注册送388元大礼包</span>
				<span v-if="xixi==0" style="background-color: #000000; color: #8b4a00 ;" >Lv.8普陀山会员</span>
			</p>
		</div>
		
		
		<div class="gray_box">
			<div class="gray_box_left">
				<a>未获得</a>
				<img src="../../../../public/grimg/yellow_bg.png" />
			</div>
			<div class="gray_box_center">
				<span>游侠风户外会员
				<br />
				全站200+户外线路免费畅玩</span>
			</div>
			<div class="gray_box_right">
				<p>
					<span>立即开通></span>
				</p>
			</div>
		</div>
		
	</div>
</template>

<script>
	export default{
		name:'User_Banner',
		data(){
			return{
				xixi:'',
				valu:0,
			}
		},
		created() {
			this.xixi=localStorage.hello
			this.valu=localStorage.valu
		}
	}
</script>

<style scoped>
	.User_top{
		width: 100%;
		height: 10rem;
		background-image: url(../../../../public/grimg/yellow_bg.png);
		background-repeat: no-repeat;
		/* 背景图片尺寸 */
		background-size: 100% 100%;
	}
	.User_top .yellow{
		z-index: 10;
	}
	.User_top p{
		height: 4.5rem;
	}
	.User_top .yellow img{
		margin-left: 1rem;
		width: 4rem;
		height: 4rem;
		border-radius: 4rem;
		vertical-align: middle;
	}
	.User_top button{
		margin-top: 2rem;
		border: none;
		font-weight: bolder;
		font-size: 1.5rem;
		background-color: #FFD700;
		
	}
	.User_top .yellow p span{
		color: white;
		width: 50%;
		text-align: center;
		display: block;
		line-height: 2rem;
		border-radius: 2rem;
		background-color: #ffa02a;
		margin-left: 5rem;
		font-size: 0.8rem;
		font-weight: bolder;
	}
	.User_top .gray_box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: -2rem auto;
		width: 95%;
		background-image: url(../../../../public/grimg/gray_bg.png);
		background-repeat: no-repeat;
		/* 背景图片尺寸 */
		background-size: 100% 100%;
		z-index: 11;	
	}
	.User_top .gray_box .gray_box_left{
		line-height: 3rem;
	}
	.User_top .gray_box .gray_box_left a{
		display: block;
		height: 1.2rem;
		text-align: center;
		line-height: 1.2rem;
		font-size: 0.5rem;
		width: 4rem;
		background-color: #c2c2c2;
		color: white;
		border-radius: 0.6rem 0 0.6rem 0;
	}
	.User_top .gray_box .gray_box_left img{
		width: 4rem;
		height: 2rem;
		margin-left: 1rem;
		z-index: 12;
		margin-right: 0.5rem;
	}
	.User_top .gray_box .gray_box_center span{
		width: 100%;
		display: block;
		line-height: 1.5rem;
		color: gold;
		font-size: 0.8rem;
	}
	.User_top .gray_box .gray_box_right p{
		display: block;
		width: 100%;
		z-index: 12;
		
	}
	.User_top .gray_box .gray_box_right p span{
		background-color: #ffe695;
		line-height: 3rem;
		margin-right: 1rem;
		border-radius: 3rem;
		font-size: small;
		
		
	}
</style>
